<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tab</title>
    <style>
        * {
    margin: 0;
    padding: 0;
}

.tabWrap {
    width: 100%;
    overflow: hidden;
}

.tabCon {
    float: left;
    white-space: nowrap;
    /* background: #1062ac; */
    border: 1px solid #ddd;
    /* color: #CCCCCC; */
    padding: 0 50px;
    transform: translateX(-50px);
}

.tabCon>li {
    display: inline-block;
    padding: 10px 0;
    margin: 0 20px;
    transition: all 0.5s;    
}
.tabWrap .tabCon .active {
    color: #1890ff;
    position:relative;

 }
 .tabWrap .tabCon .active::after{
    content: '';
    width: 30px;
    border: 1px solid #1890ff;
    position: absolute;
    bottom:0;
    left:calc(50% - 15px);
 }

    </style>
</head>

<body>
        <div class="tabWrap">
                <ul class="tabCon">
                    <li>最新</li>
                    <li>排行</li>
                    <li class="active">国内</li>
                    <li>国际</li>
                    <li>社会</li>
                    <li>评论</li>
                    <li>深度</li>
                    <li>军事</li>
                    <li>历史</li>
                    <li>探索</li>
                    <li>图片</li>
                    <li>博客</li>
                    <li>媒体</li>
                    <li>视频</li>
                    <li>视频</li>
                    <li>视频</li>
                    <li>视频</li>
                </ul>
            </div>

</body>

<script>
    var tabWrap = document.querySelector('.tabWrap');
    var tabCon = tabWrap.children[0];
    var startX = 0;
    var centerX = -50;
    var maxLeft = 0;
    var maxRight = -(tabCon.offsetWidth - tabWrap.offsetWidth + maxLeft);
    var maxLeftSlide = -50;
    var maxRightSlide = -(tabCon.offsetWidth - tabWrap.offsetWidth + maxLeftSlide);
    tabCon.addEventListener('touchstart', function(e) {
        tabCon.style.transition = 'none'
        startX = e.changedTouches[0].clientX;
    })

    tabCon.addEventListener('touchmove', function(e) {
        var dx = e.changedTouches[0].clientX - startX;
        var tempX = centerX + dx
        
        if (tempX > maxLeft) {
            tempX = maxLeft;
        } else if (tempX < maxRight) {
            tempX = maxRight;
        }
        tabCon.style.transform = 'translateX('+tempX+'px)'
    })

    tabCon.addEventListener('touchend', function(e) {
        var dx = e.changedTouches[0].clientX - startX;
        centerX = centerX + dx;
        if (centerX > maxLeftSlide) {
            centerX = maxLeftSlide;
        } else if (centerX < maxRightSlide) {
            centerX = maxRightSlide;
        }
        tabCon.style.transition = 'transfrom .5s'
        tabCon.style.transform = 'translateX('+centerX+'px)'
    })

    var tabConLi = tabCon.children
    for(let i=0;i<tabConLi.length;i++){
        tabConLi[i].addEventListener('click',
            function (e){
                    for(let item of tabConLi){
                        item.className = ''
                    }
                    e.target.className = 'active'
                console.log(e.target.className,e.target.innerHTML)
            }
        )
    }


</script>
</html>